<template>
  <div id="canvas"></div>
</template>

<script>
import {
  BoxGeometry,
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  MeshBasicMaterial,
  Mesh,
  // TextureLoader
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
  name: 'Editor',
  data() {
    return {
      content: '',
      scene: null,
      camera: null,
      renderer: null,
      mesh: null
    };
  },
  mounted() {
    this.scene = new Scene();
    this.camera = new PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    this.renderer = new WebGLRenderer({ antialias: true });
    this.renderer.setSize(400, 400);
    const $canvas = document.getElementById('canvas');
    $canvas.innerHTML = this.renderer.domElement;
    // document.body.appendChild(this.renderer.domElement)
    window.addEventListener('resize', () => this.onWindowResize());

    // const textureLoader = new TextureLoader();
    // const boxTexture = textureLoader.load('../assets/images/box.jpg');
    const boxGeometry = new BoxGeometry(1, 1, 1);
    const meshBasicMaterial = new MeshBasicMaterial({ color: 'red' });
    // const meshBasicMaterial = new MeshBasicMaterial({ map: boxTexture })

    const mesh = new Mesh(boxGeometry, meshBasicMaterial);
    mesh.name = 'box';
    this.camera.position.set(0, 0, 5);

    this.scene.add(mesh);

    new OrbitControls(this.camera, this.renderer.domElement);
    this.render();
  },
  created() {},
  methods: {
    onWindowResize() {
      this.renderer.setSize(400, 400);
    },
    render() {
      window.requestAnimationFrame(() => this.render());
      // const box = this.scene.getObjectByName('box');
      // box.rotation.x += 0.01
      // box.rotation.y += 0.01
      // box.rotation.z += 0.01
      this.renderer.render(this.scene, this.camera);
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
